<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/common/css/bootstrap.css">
    <link rel="stylesheet" href="/css/basic.css">
    <script src="/common/js/jquery-1.10.1.js"></script>
    <script src="/common/js/bootstrap.js"></script>
</head>

<body>
    <%- include('../components/header.ejs') %>
        <div class="container-fluid">
            <div class="row">
                <!-- 侧边栏开始 -->
                <%- include('../components/sidebar.ejs',{flag:1}) %>
                    <!-- 侧边栏结束 -->
                    <div class="col-sm-10">
                        <ol class="breadcrumb">
                            <li>用户管理
                            </li>
                            <li class="active">用户列表
                            </li>
                        </ol>
                        <!-- 列表展示-->
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>姓名</th>
                                        <th>头像</th>
                                        <th>年龄</th>
                                        <th>性别</th>
                                        <th>地址</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% userlist.forEach((value,index)=>{ %>
                                        <tr>
                                            <td>
                                                <%= value._id %>
                                            </td>
                                            <td>
                                                <%= value.username %>
                                            </td>
                                            <td><img src="<%= value.pic %>" alt="" style="width: 50px;"></td>
                                            <td>
                                                <%= value.age %>
                                            </td>
                                            <td>
                                                <%= value.sex %>
                                            </td>
                                            <td>
                                                <%= value.address %>
                                            </td>
                                            <td class="text-center">
                                                <a type="button" class="btn btn-primary" href="/admin/edituser?id=<%= value._id %>">修改</a>
                                                <!-- 添加弹出模态框的自定义属性 -->
                                                <button type="button" class="btn btn-danger delBtn" data-toggle="modal" data-target="#myModal" data-id="<%= value._id %>" data-name="<%= value.username %>">删除</button>
                                            </td>
                                        </tr>
                                        <% })%>
                                </tbody>
                            </table>
                            <!-- 分页 -->
                            <ul class="pagination">
                                <li>
                                    <a href="">共<span><%= total %></span>条数据</a>
                                </li>
                                <li class="<%= page==1?'active':''%>">
                                    <a href="/admin/userlist?page=1">首页</a>
                                </li>
                                <li class="<%= page==1?'disabled':''%>">
                                    <a href="/admin/userlist?page=<%= page-1 %>">上一页</a>
                                </li>
                                <% for(let i=1;i<=totalPage;i++){ %>
                                    <li class="<%= page==i?'active':''%>">
                                        <a href="/admin/userlist?page=<%= i%>">
                                            <%= i %>
                                        </a>
                                    </li>
                                    <% } %>
                                        <li class="<%= page==totalPage?'disabled':''%>">
                                            <a href="/admin/userlist?page=<%= page+1 %>">下一页</a>
                                        </li>
                                        <li class="<%= page==totalPage?'active':''%>">
                                            <a href="/admin/userlist?page=<%= totalPage %>">末页</a>
                                        </li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
        <!-- 引入模态框的ejs文件     -->
        <%- include('../components/modal.ejs') %>
            <script>
                $('.delBtn').click(function() {
                    console.log(this.dataset.id);
                    console.log($(this).data('id'));
                    $('#infoId').val($(this).data('id'));
                    // 设置删除的名称
                    $('.usernameVal').text($(this).data('name'));
                });
            </script>

</body>

</html>